<template>
  <div>
    <div class="top">
      <div class="avatar">
        <img src="../../assets/picture/avatar.png" alt="" />
      </div>

      <div class="introduce">
        <div class="nickname">
          <span class="name">熊猫女士</span>
          <img src="../../assets/picture/bianji.png" alt="" />
        </div>
        <div class="bio">用一句话介绍自己...</div>
      </div>

      <img src="../../assets/picture/shezhi.png" alt="" class="shezhi" />

      <div class="menu">
        <van-grid class="main" column-num="3" icon-size="50">
          <van-grid-item
            icon="/src/assets/picture/jianli.png"
            text="附件简历"
            class="one"
          />
          <van-grid-item
            icon="/src/assets/picture/toudi.png"
            text="已投简历"
            class="one"
          />
          <van-grid-item
            icon="/src/assets/picture/shoucang.png"
            text="我的收藏"
            class="one"
          />
        </van-grid>
      </div>
    </div>

    <div class="middleMenu">
      <van-cell is-link class="long">
        <template #icon center>
          <img src="/src/assets/picture/qiuzhiguanli.png" class="icon" />
        </template>
        <template #title >
          <span class="title">管理求职意向</span>
        </template>
        <template #value >
          <span class="value">在职考虑机会</span>
        </template>
      </van-cell>
      <van-cell is-link class="short">
        <template #icon >
          <img src="/src/assets/picture/zhuye.png" class="icon" />
        </template>
        <template #title >
          <span class="title">个人主页</span>
        </template>
      </van-cell>
      <van-cell is-link class="short">
        <template #icon >
          <img src="/src/assets/picture/guanzhu.png" class="icon" />
        </template>
        <template #title >
          <span class="title">关注公司</span>
        </template>
      </van-cell>
      <van-cell is-link class="long">
        <template #icon >
          <img src="/src/assets/picture/wenda.png" class="icon" />
        </template>
        <template #title >
          <span class="title">常见问答</span>
        </template>
      </van-cell>
      <van-cell is-link class="long">
        <template #icon >
          <img src="/src/assets/picture/bangzhufankui.png" class="icon" />
        </template>
        <template #title >
          <span class="title">帮助与反馈</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<style scoped lang="less">
.top {
  width: 10rem;
  height: 5.1467rem;
  background: url(../../assets/picture/背景.png);
  display: flex;
  position: relative;

  .avatar {
    padding: 1.6667rem 0.4rem 0;
    img {
      width: 1.8667rem;
      height: 1.8667rem;
    }
  }

  .introduce {
    padding-top: 2rem;

    .nickname {
      font-family: SourceHanSansCN-Bold;
      font-size: 0.64rem;
      color: white;
      display: flex;
      align-items: end;

      img {
        margin-left: 0.32rem;
        width: 0.3733rem;
        height: 0.3733rem;
      }
    }

    .bio {
      margin-top: 0.24rem;
      font-size: 0.2933rem;
      color: white;
    }
  }

  .shezhi {
    position: absolute;
    width: 0.5067rem;
    height: 0.5067rem;
    right: 0.4rem;
    top: 1rem;
  }

  .menu {
    position: absolute;
    left: 0.4rem;
    top: 4.0667rem;
    height: 2.1333rem;

    .main {
      width: 9.2rem;
      height: 2.5333rem;
      box-shadow: 0rem 0.08rem 0.28rem 0rem rgba(20, 150, 57, 0.22);
      border-radius: 0.2667rem;
      overflow: hidden;
      font-size: 0.32rem;

      .one {
        border-radius: 0.2667rem;
      }

      .one :deep(.van-grid-item__text) {
        font-size: 0.32rem;
      }
    }
  }
}

.middleMenu {
  margin: 1.7333rem 0.4rem 0.4rem;
  height: 0.4rem;
  font-size: 0.4rem;

  .long,
  .short {
    width: 9.2rem;
  }

  .long {
    margin-bottom: 1.1067rem;
  }

  .short {
    margin-bottom: 0.6267rem;
  }

  .icon {
    width: 0.4267rem;
    height: 0.4rem;
    margin-right: 0.4133rem;
  }

  .title {
    font-size: 0.4rem;
  }

  .value {
    font-size: 0.32rem;
  }
}
</style>
